<!DOCTYPE html>
<html>
    <head>
        <style>
            body {background-color:#f9f9f9;}
            a { text-decoration: none; }
            .uri {width:95%;background-color:#eee;}
            .uri li { width:15%;height:40px;padding:15px;font-size:9pt;list-style-type:none;float:left;margin-bottom:15px;margin-right:30px;border:1px solid #e4ecf3;background-color:#fff;color:#2c2e2f;font-weight:bold;}
            .uri img { width:40px;height:40px;margin-right:10pt;vertical-align:middle;}
            #bottom_column {clear:both;padding-top:10px;}
            .top_column_hover { background-color: #fff;font-weight:bold;color: orange;}
            #top_column li { height: 30px;width: 120px;text-align: center;line-height: 30px;margin: -1px -1px 0px -1px;float:left;list-style-type:none; font-weight:bold;}
        </style>       
    </head>
    <body>
    	<content id='concent'> mylink </content>

    </body>
    <script type="text/javascript" src="js/yaml.min.js"></script>
    <script>
		window.onload=oni;
    	function oni(){
        	nativeObject = YAML.load('uri.yaml');
        	var myDom = document.getElementById("concent");
        	list = '<ul id="top_column">';
        	itema = '<div id="bottom_column">';
        	for (var i in nativeObject) {
        	    list += "<li>"+i+"</li>";
        	    itema += "<ul class='uri'>";
        	    for (var j in nativeObject[i]) {
        	        itema += "<a href='"+nativeObject[i][j][0]+"' target='_blank'><li><img src='./logos/"+nativeObject[i][j][1]+"' />"+j+"</li></a>";
        	    };
        	    itema += "</ul>";
        	};
        	list += '</ul>';
        	myDom.innerHTML = list+itema+'</div>';

			var top_column=document.getElementById("top_column").getElementsByTagName("li");
			var bottom_column=document.getElementById("bottom_column").getElementsByTagName("ul");

			for(var i=0;i<top_column.length;i++){
				top_column[i].id=i;
				bottom_column[i].style.display="none";
				if (i == 0)
				{
					top_column[i].className="top_column_hover";
					bottom_column[i].style.display="block";
				} 
				top_column[i].onmouseover=function(){
					tab_content(this.id);
				}
			}

			function tab_content(i){

				for(var j=0;j<top_column.length;j++){
						top_column[j].className="top_column_not_hover";
						bottom_column[j].style.display="none";
				}

				top_column[i].className="top_column_hover";
				bottom_column[i].style.display="block";
			}
		}
	</script>
	
	
</html>